<template>
	<view>
		<uni-nav-bar title="发红包" backgroundColor="transparent" left-icon="back" @clickLeft="handleBack" :border="false"
			:fixed="true" :status-bar="true"></uni-nav-bar>
		
		<!-- #ifdef H5 -->
		<div class="" style="height: 44px;"></div>
		<!-- #endif -->

		<image src="http://api.fceos.cn/qiliaoyun/profile/appImages/img_fahongbao@2x.png" mode="widthFix"
			class="w-full navImg"></image>

		<view class="px-20 py-48 ">
			<view class="bg-FFF round-20 px-36 py-48">
				<u-radio-group v-model="moneyId" placement="row" @change="redTypeConfirm">
					<u-radio style="margin-right: 20rpx;" v-for="(item, index) in redPacketList" :key="index"
						:label="item.moneyName" :name="item.moneyId" activeColor="#FF4037">
					</u-radio>
				</u-radio-group>

				<u-divider></u-divider>

				<view class="bg-F8F8F8 px-32 py-28 flex items-center justify-between">
					<view class="text-32 text-F40600 font-500">
						总额
					</view>
					<input type="number" v-model="redPacketPrice" placeholder="0"
						placeholder-style="text-align:righht" />
				</view>
				<view class="bg-F8F8F8 px-32 py-28 flex items-center justify-between mt-48" v-if="isGroup == 1">
					<view class="text-32 text-F40600 font-500">
						红包个数
					</view>
					<input type="number" v-model="redPacketNum" placeholder="红包个数"
						placeholder-style="text-align:righht" />
				</view>
				<view class="text-20 mt-8 pl-12 text-gray" v-if="groupNum>0">
					本群共有{{groupNum}}人
				</view>
				<view class="flex items-center justify-between mt-48">
					<u--textarea v-model="remark" border="none" placeholder="恭喜发财,大吉大利"></u--textarea>
				</view>
				<view class="mt-48 redStyle px-32 py-28 flex flex-col items-start justify-between">
					<view class="text-32" style="color: #FFF171;">
						红包封面
					</view>
					<view class="text-24" style="color: #FFF171;">
						富乐万家
					</view>
				</view>
				<view class="confirm text-center text-FFF" @click="confirm()">
					塞钱进红包
				</view>
			</view>
		</view>

		<u-popup :show="payPasswordShow" @close="payPasswordShow = false" mode="bottom" :closeable="true">
			<view class="px-48 ">
				<view class="py-32 text-center text-36 font-700">
					请输入支付密码
				</view>
				<view class="mt-48 flex flex-col items-center">
					<u-code-input v-model="payPassword" :space="20" :focus="true" :dot="true"
						@finish="passwordConfrim"></u-code-input>
					<view class="" style="height: 80rpx;">

					</view>
					<!-- 	<view class="bg-theme round-20 py-24 text-32 text-FFF mb-32 text-center"
						style="width: 375rpx;margin-top: 72rpx;" @click="$modal.throttle((),2000)">
						确认
					</view> -->
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				groupId: null,
				isGroup: null,
				redPacketPrice: null,
				redPacketNum: null,
				remark: null,
				title: null,


				redPacketList: [],
				moneyId: null,


				payPassword: "",
				payPasswordShow: false,
			};
		},
		onLoad(e) {
			this.groupId = e.groupId
			this.isGroup = e.isGroup
			this.title = e.title
			if (this.isGroup == 0) {
				this.redPacketNum = 1
			} else {
				this.groupNum = e.groupNum
			}
			
			// #ifdef MP-WEIXIN
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage']
			})
			// #endif

			this.getData()
		},
		methods: {
			redTypeConfirm(e) {
				this.moneyId = e
			},
			async getData() {
				const res = await this.$Api.user.userRichInfo()
				let tem = res.data.filter(item => {
					return item.moneyConfig.isRedPacket == 1
				})
				this.moneyId = tem[0].moneyId
				// tem.push({
				// 	moneyId: '2',
				// 	moneyName: "微信"
				// }, {
				// 	moneyId: '3',
				// 	moneyName: "支付宝"
				// })
				this.redPacketList = tem
			},
			async confirm() {
				if (this.redPacketPrice <= 0) {
					this.$modal.msg('请输入正确金额!')
					return
				}
				this.payPassword = ""
				
				
				if (this.moneyId == '2' || this.moneyId == '3') {
					uni.showLoading({
						title:'支付中...'
					})
					
					
					const res = await this.$Api.user.rechargesend({
						groupId: this.groupId,
						redPacketPrice: this.redPacketPrice,
						redPacketNum: this.redPacketNum,
						remark: this.remark ? this.remark : '恭喜发财,大吉大利',
						payWay: this.moneyId
					})
					console.log(res, '支付宝')
					
					uni.hideLoading()
					
					if (this.moneyId == '2') {
						this.$pay.WeChatPay(res).then(() => {
							this.handleBack()
						})
					} else {
						this.$pay.Alipay(res.data).then(() => {
							this.handleBack()
						})
					}
				} else {
					this.payPasswordShow = true
				}
			},
			async passwordConfrim() {
				if (!this.payPassword || this.payPassword.length < 6) {
					this.$modal.msg('请输入支付密码!')
					return
				}
				
				if (this.redPacketPrice <= 0) {
					this.$modal.msg('请输入正确金额!')
					return
				}

				this.payPasswordShow = false
				
				uni.showLoading({
					title:'支付中...'
				})

				const res = await this.$Api.chat.redpacket({
					groupId: this.groupId,
					redPacketPrice: this.redPacketPrice,
					redPacketNum: this.redPacketNum,
					remark: this.remark ? this.remark : '恭喜发财,大吉大利',
					moneyId: this.moneyId,
					payPassword: this.payPassword
				})
				
				uni.hideLoading()
				
				if (res.data == 1) {
					this.handleBack()
				}

				if (res.data == 2) {
					this.$modal.msg('余额不足!')
					// this.$modal.confirm('余额不足，是否去充值?').then(con => {
					// 	if (con) {
					// 		this.$tab.nav(`/pages/mine/service/recharge?id=${this.moneyId}`)
					// 	}
					// })
				}
			},
			handleBack() {
				this.$tab.redTo(
					`/pages/chat2/chatIndex?isGroup=${this.isGroup}&groupId=${this.groupId}&title=${this.title}&id=''`)
			}
		}
	}
</script>

<style lang="scss">
	.navImg {
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1;
	}

	input {
		text-align: right;
	}

	/deep/ .u-textarea {
		background: #f8f8f8 !important;
	}

	.redStyle {
		height: 140rpx;
		background: url('http://api.fceos.cn/qiliaoyun/profile/appImages/img_hongbaofengmian@2x.png') no-repeat;
		background-size: 100% 100%;
	}

	.confirm {
		width: 400rpx;
		height: 88rpx;
		background: #FF4037;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		line-height: 88rpx;
		margin: 96rpx auto 0;
	}
</style>